<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
        <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
        <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">

        <style>
            .container{
                margin: 20px;
                box-sizing: border-box;
                width:800px;
                border: 1px solid #ddd;
            }
            .show-grid{
                margin-top: 10px;
                margin-bottom: 20px; 
            }
        </style>

    </head>
    <body>
     
        <div class="container">
            <!-- 分页功能 -->
            <div class="row show-grid">
                <div class="span18 offset1">
                    
                    <div>
                        <div class="pagination pull-right">
                            <ul>
                              <li class="prevBtn disabled"><a href="javaScript:;">« 上一页</a></li>
                              <li><a href="javaScript:;">1</a></li>
                              <li><a href="javaScript:;">2</a></li>
                              <li><a href="javaScript:;">3</a></li>
                              <li class="active"><a href="javaScript:;">4</a></li>
                              <li class="nextBtn disabled"><a href="javaScript:;">下一页 »</a></li>
                            </ul>
                          </div>
                    </div>
                </div>
            </div>
        
        </div>

        <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
        <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
        <script src="http://g.alicdn.com/bui/bui/1.1.10/config.js"></script>


        <script>
            
            // 分页按钮操作
            var Obj = {
                init:function(){
                    this.paging(4);
                },

                /**
                * 分页功能
                *   需要传入的参数：
                *       maxPage：总页数
                *   思路：
                *       1、在“上一页”和“下一页”的li标签中，分别添加“prevBtn”和“nextBtn”类
                *       2、通过hasClass()判断当前点击的分页按钮是否是“上一页”和“下一页”
                *       3、如果点击的是“上一页”按钮，判断当前页数是否是第一页，若是，则什么都不操作；反之，则获取当前的页数，并减去1，直到回到第一页，则什么都不操作
                *       4、如果点击的是“下一页”按钮，判断当前页数是否是最后一页【即是否是传入的值】，若是，则什么都不操作；反之，则获取当前的页数，并加上1，直到回到最后一页，则什么都不操作
                *       5、如果点击的是“页数”，则判断是否是 第一页  和 最后一页，若是，则分别为“上一页”和“下一页”添加上disabled类，表示禁止按钮
                *       6、一开始遍历时，先判断当前页数，是否需要为“上一页”和“下一页”按钮添加disabled类
                */
                paging:function(maxPage){
                    $('.pagination >ul >li').each(function(){
                        //点击 “分页” 按钮
                        let currPageNum = $('.pagination .active').find('a').html();
                        // 一进来先判断当前页面是否是最大最小页
                        prevNextBtnStyle(currPageNum);

                        $(this).click(function(event){
                            // 获取当前点击对象的内容
                            let currentText = $(event.currentTarget).find('a').html();
                            //获取当前是哪一页
                            let currPage = $('.pagination .active').find('a').html();

                            if($(event.currentTarget).hasClass('prevBtn')){ 
                                //匹配当前点击的对象是 “上一页” 按钮
                                if(currPage===1 || currPage==="1"){
                                    //当前为第一页
                                    return;
                                }else{
                                    currPage--;
                                    if(currPage-1==0){
                                        //到第一页时 就禁止点击
                                        $('.prevBtn').addClass('disabled');
                                    }
                                    $('.pagination .active').prev('li').addClass('active').siblings().removeClass('active');
                                    $('.nextBtn').removeClass('disabled');
                                }

                            }else if($(event.currentTarget).hasClass('nextBtn')){
                                //匹配当前点击的对象是 “下一页” 按钮
                                if(currPage===maxPage || currPage===""+maxPage+""){
                                    return;
                                }else{
                                    currPage++;
                                    // 到最后一页 就禁止点击
                                    if((parseInt(currPage))==maxPage){
                                        $('.nextBtn').addClass('disabled');
                                    }
                                    $('.pagination .active').next('li').addClass('active').siblings().removeClass('active');
                                    $('.prevBtn').removeClass('disabled');
                                }

                            }else{
                                // 点击数字的操作
                                prevNextBtnStyle(parseInt(currentText));
                                if(parseInt(currentText)===1){
                                    $(event.currentTarget).addClass('active').siblings().removeClass('active');
                                }else if(parseInt(currentText)===maxPage){
                                    $(event.currentTarget).addClass('active').siblings().removeClass('active');
                                }else{
                                    $(event.currentTarget).addClass('active').siblings().removeClass('active');
                                }


                            }
                        });

                        //“上一页”和“下一页”按钮的样式控制
                        function prevNextBtnStyle(pageNum){
                            if(parseInt(pageNum)===1){
                                $('.prevBtn').addClass('disabled');
                                $('.nextBtn').removeClass('disabled');
                            }else if(parseInt(pageNum)===maxPage){
                                $('.nextBtn').addClass('disabled');
                                $('.prevBtn').removeClass('disabled');
                            }else{
                                $('.prevBtn').removeClass('disabled');
                                $('.nextBtn').removeClass('disabled');
                            }
                        }

                    });
                }

            };

            $(function(){
                Obj.init();
            });


        </script>

    </body>
</html>